var dftColor = 'gray';
// 初始化echarts
var myChart = echarts.init(document.getElementById('map'));

const coordsys = 'mapbox3D';

var bmapopt = {
    center: __mapcenter__,
    zoom: 17,
    roam: true,
};


echarts.registerMap('buildings', {
    "features": builds
});
var polygondata = builds.map(function (feature) {
    return {
        coords: feature.geometry.coordinates[[0]],
        height: feature.properties.height,
    };
});
var regionsData = builds.map(function (feature) {
    return {
        name: feature.properties.name,
        value: Math.random() * 1,
        height: feature.properties.height,
    };
});
var mapboxOption = {
    center: __mapcenter__,
    style: mapboxStyle,
    zoom: 16,
    pitch: 60,
    postEffect: {
        enable: true,
        // SSAO: {
        //     enable: true,
        // intensity: 1.3,
        // radius: 5
        // },
        // screenSpaceReflection: {
        //     enable:false
        // },
        // depthOfField: {
        //     enable: true,
        //     blurRadius: 2,
        //     focalDistance: 3,
        //     focalRange: 20
        // },
        // FXAA: {//抗锯齿
        //     enable: true
        // }
    },
    light: {
        main: {
            intensity: 0.5,
            // shadow: true,
            // shadowQuality: 'high'
            alpha: 0,
        },
        // ambient: {
        //     intensity: 0.5,
        //     color:'#008000'
        // },
        ambientCubemap: {
            texture: 'assets/data-1491838644249-ry33I7YTe.hdr',
            exposure: 0.8,
            diffuseIntensity: 0.5,
            specularIntensity: 0.6
        }
    },
};

var echartsopt = {
    series: [
    ],
}
echartsopt[coordsys] = mapboxOption;

var series_map3D = {
    name: 'buildings',
    type: 'map3D',
    coordinateSystem: coordsys,
    map: 'buildings',
    data: regionsData,
    shading: 'realistic',
    silent: true,
    instancing: true,
    lambertMaterial: {

    },
    realisticMaterial: {
        metalness: 0,
        roughness: 0.4,
        // textureTiling: 200,
        // detailTexture: 'assets/data-1528097075999-B13VYDfxm.jpg'
    },
    label: {
        show: false,
        formatter: '111',
        textStyle: {
            fontSize: 14,
            fontWeight: 'bold'
        }
    },
}
var series_polygons3D = {
    type: 'polygons3D',
    coordinateSystem: coordsys,
    data: polygondata,
    shading: 'realistic',
    silent: true,
    instancing: true,
    realisticMaterial: {
        metalness: 0.5,
        roughness: 0.4,
        // textureTiling: 200,
        // detailTexture: '/asset/get/s/data-1528097075999-B13VYDfxm.jpg'
    },
};

var data_scatter = []; var extendseed = 0.05;
var minjd = 116.545001990849300 - extendseed, maxjd = 116.6456381287966906 + extendseed,
    minwd = 35.3579187352614781 - extendseed, maxwd = 35.4473700687736937 + extendseed;
function randomPos() {
    return [minjd + Math.random() * (maxjd - minjd), minwd + Math.random() * (maxwd - minwd), 1];
}
for (var i = 0; i <= 100; i++) {
    data_scatter.push(randomPos)
}
var series_scatter = {
    type: 'scatter3D',
    coordinateSystem: coordsys,
    symbol: 'circle',
    symbolSize: 10,
    data: data_scatter,
    symbolSize: 20,
    itemStyle: {
        color: 'rgb(50, 50, 150)',
        opacity: 1
    },
}
echartsopt.series.push(series_scatter);
echartsopt.series.push(series_polygons3D);
// echartsopt.series.push(map3DSeries);

myChart.setOption(echartsopt);
var ins_mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
ins_mapbox.on('style.load', function () {
    // loadimg();
});

var marker = new mapboxgl.Marker({
    element:$('.dommarker')[0]
})
    .setLngLat(__mapcenter__)
    .addTo(ins_mapbox);
    console.log(marker.getElement())
function loadimg(){
ins_mapbox.loadImage(
    'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
    function (error, image) {
        if (error) throw error;
        ins_mapbox.addImage('cat', image);
        ins_mapbox.addSource('point', {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': __mapcenter__
                        }
                    }
                ]
            }
        });
        ins_mapbox.addLayer({
            'id': 'points',
            'type': 'symbol',
            'source': 'point',
            'layout': {
                'icon-image': 'cat',
                'icon-size': 0.25
            }
        });
    }
);
}
